<template>
  <el-card shadow="never" class="border-0">
    <Search @search="getData" @reset="resetSearchForm" :model="searchForm">
      <search-item label="关键词" prop="title">
        <el-input v-model="searchForm.title" placeholder="商品标题" clearable />
      </search-item>
    </Search>

    <el-table default-expand-all :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="flex pl-18">
            <el-avatar :size="50" shape="circle" :src="row.user.avatar" fit="cover" class="mr-3"/>
            <div class="flex-1">
              <h6 class="flex items-center">
                {{ row.user.nickname || row.user.username }}
                <small class="text-gray-400 ml-2">{{ row.review_time }}</small>
                <el-button size="small" @click.stop="openTextarea(row)" class="ml-auto" 
                  v-if="!row.textareaEdit && !row.extra">
                  回复
                </el-button>
              </h6>

              {{ row.review.data }}
              <div class="py-2">
                <el-image v-for="(item, index) in row.review.image" :key="index" :src="item" fit="fill" :lazy="true" 
                  style="width: 100px; height: 100px;" class="rounded"/>
              </div>

              <div v-if="row.textareaEdit">
                <el-input v-model="textarea" placeholder="请输入评价内容" type="textarea" :row="2"/>
                <div class="py-2">
                  <el-button type="primary" size="small" @click="review(row)">回复</el-button>
                  <el-button size="small" @click="row.textareaEdit = false" class="ml-2">取消</el-button>
                </div>
              </div>

              <template v-else>
                <div class="mt-3 bg-gray-100 p-3 rounded" v-for="(item, inde) in row.extra" :key="index">
                  <h6 class="flex font-bold">
                    客服
                    <el-button class="ml-auto" size="small" @click="openTextarea(row, item.data)">修改</el-button>
                  </h6>
                  <p>{{ item.data }}</p>
                </div>
              </template>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="ID" width="70" prop="id" align="center" />
      <el-table-column label="商品">
        <template #default="{ row }">
          <div class="flex items-center">
            <el-image :src="row.goods_item.cover ?? ''" @error="() => true" style="width: 50px; height: 50px;" class="rounded" />
            <div class="ml-3">
              <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价信息">
        <template #default="{ row }">
          <div>
            <p>用户：{{ row.user.nickname || row.user.username }}</p>  
            <p>
              <el-rate v-model="row.rating" show-score disabled text-color="#ff9900"/>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价时间" align="center" prop="review_time" />
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-switch
            :disabled="row.super === 1"
            :model-value="row.status"
            :active-value="1"
            :inactive-value="0"
            :loading="row.statusLoading"
            @change="handleStatusChange($event, row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <div class="flex items-center justify-center mt-5">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage" 
        :page-size="limit" @current-change="getData"/>
    </div>

  </el-card>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    getGoodsCommentListApi,
    updateGoodsCommentStatusApi,
    reviewGoodsCommentApi
  } from '@/api/goods_comment.js'
  import Search from '@/components/Search.vue'
  import SearchItem from '@/components/SearchItem.vue'
  import { useInitTable } from '@/hooks/useCommon.js'
  import { toast } from '@/utils'

  // 角色列表
  const roles = ref([])
  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange,
  } = useInitTable({
    // 搜索需要的参数
    searchForm: {
      title: '',
    },
    // 获取表单的api
    getlist: getGoodsCommentListApi,
    updateStatus: updateGoodsCommentStatusApi,
    // 获取表单成功的回调
    onGetListSuccess: (res) => {
      tableData.value = res.list.map((o) => {
        o.statusLoading = false
        o.textareaEdit = false
        return o
      })
      total.value = res.totalCount
      roles.value = res.roles
    },
  })

  const textarea = ref('')
  function openTextarea(row, data = '') {
    textarea.value = data
    row.textareaEdit = true
  }

  function review(row) {
    if(textarea.value == '') return toast('恢复内容不能为空', 'error')
    reviewGoodsCommentApi(row.id, textarea.value)
      .then(() => {
        row.textareaEdit = false
        toast('回复成功')
        getData()
      })
  }
</script>

<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>
